<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <div style="display: flex;">
        <!-- 网站图标 -->
        <el-menu-item style="width: 300px; pointer-events: none; color: inherit;" @click="preventClick">
          <img style="width: 50px; height: auto; margin-right: 6px;" src="../assets/xh.png" alt="校徽">
          <span style="font-family: '隶书'; font-size: 18px;">中山大学</span>
          <span style="margin: 0 5px;"> | </span>
          <span style="font-family: '方正舒体'; font-size: 18px;">数字百团</span>
        </el-menu-item>



        <el-menu-item @click="goToPage('/homepage')" index="1">首页</el-menu-item>
        <el-menu-item @click="goToPage('/club')" index="2">社团</el-menu-item>
        <el-menu-item @click="goToPage('/activity')" index="3">活动</el-menu-item>

      </div>

      <div style="display: flex;align-items: center;">
        <!-- 切换按钮-->
        <el-menu-item class="switch_item">
          <el-button plain class="switch_btn"><el-icon color="#777575" class="no-inherit"><Switch /></el-icon>切换管理员端</el-button>
        </el-menu-item>
        <!-- 消息按钮 -->
        <el-menu-item>
          <el-popover placement="bottom" :width="400" trigger="click">
            <template #reference>
              <button plain class="message-btn" @click="fetchMessages">
                <el-badge :value="messages.length" :max="99" class="item">
                  <el-icon color="red" class="no-inherit" :size="20" style="vertical-align: middle">
                    <Bell />
                  </el-icon>
                </el-badge>
                <div>消息</div>
              </button>
            </template>
            <div v-if="messages.length === 0">暂时没有未读消息</div>
            <div v-else>
              <ul>
                <li v-for="message in limitedMessages" :key="message.id" class="message-item">
                  <div style="display: flex;align-items: center;">
                    <div style="margin-right: 10px;">
                      <img :src="message.avatar" alt="头像" class="avatar">
                    </div>
                    <div class="sendname-title">
                      <div style="color: #131313; font-size: 1.3em;">{{ message.sendname }}</div>
                      <div style="color: rgba(23,22,22,0.88); font-size: 1.1em;">{{ message.title+message.content }}</div>
                    </div>
                  </div>
                  <el-icon @click="toggleMessage(message)" style="cursor: pointer;">detail:</el-icon>
                  <div style="text-align: right; font-size: 12px;">{{ message.sendTime }}</div>
                </li>
              </ul>
              <el-button type="text" @click="showAllMessages">显示全部消息</el-button>
            </div>
          </el-popover>
        </el-menu-item>

        <!-- 头像下拉框 -->
        <el-menu-item class="profile">
          <el-dropdown trigger="hover" placement="bottom" class="profile_dropdown">
            <div style="flex:1;display: flex;align-items: center;" class="pdt">
              <img src="../assets/avatar.jpg" alt="头像" style="border-radius: 0;width: 50px;height: auto;cursor: pointer;object-fit: cover;">
              <span style="margin-left: 10px;margin-right: 30px;font-family: 'Arial';font-size: 16px;color: black;">{{username}}</span>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="goToPage('/personalcenter')">个人中心</el-dropdown-item>
                <el-dropdown-item>切换账号</el-dropdown-item>
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-menu-item>
      </div>
    </el-menu>
  </div>
</template>

<script>
import { ref } from "vue";
import axios from "axios";

export default {
  data() {
    return {
      activeIndex: '1',
      input: ref(''),
      username: "鱼鳞",
      allMessage: [],
      messages: [],
    };
  },
  computed: {
    limitedMessages() {
      return this.messages.slice(0, 5);
    }
  },
  methods: {
    fetchMessages() {
      axios.get('/api/msg', {
        params: {
          account: this.$store.state.userinfo.account
        }
      })
          .then(response => {
            this.allMessage = response.data.data.mesg
            console.log(response)
            console.log(this.allMessage.length)
            this.messages = [];
            for (let index = 0; index < this.allMessage.length; index++) {
              this.messages.push({
                id: this.allMessage[index].mid,
                sendname: this.allMessage[index].sname,
                title: this.allMessage[index].title,
                sendTime: this.formatDate(this.allMessage[index].mtime),
                state: this.allMessage[index].state,
                content: this.allMessage[index].content,
                showContent: false,
                avatar: this.generateAvatar(this.allMessage[index].sname)
              })
            }
          })
          .catch(function (err) {
            console.log('消息获取失败' + err)
          })
    },
    generateAvatar(name) {
      const canvas = document.createElement('canvas');
      const size = 50;
      canvas.width = size;
      canvas.height = size;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = '#009688';
      ctx.beginPath();
      ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
      ctx.fill();
      ctx.fillStyle = '#fff';
      ctx.font = '20px Arial';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText(name[0], size / 2, size / 2);
      return canvas.toDataURL();
    },
    formatDate(dateString) {
      const date = new Date(dateString);
      const year = date.getUTCFullYear();
      const month = date.getUTCMonth() + 1;
      const day = date.getUTCDate();
      const hours = date.getUTCHours();
      const minutes = date.getUTCMinutes();
      return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day} ${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}`;
    },
    toggleMessage(message) {
      message.showContent = !message.showContent;
    },
    showAllMessages() {
      console.log("显示全部消息");
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    goToPage(route) {
      this.$router.push(route);
    }
  },
  mounted() {
    this.fetchMessages();
  }
}
</script>

<style scoped lang="scss">
.el-menu-demo {
  background-color: #DFF3FF;
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;

  .switch_item {
    background-color: transparent !important;
    border-color: transparent !important;
    .switch_btn {
      background-color: transparent !important;
      border: none;
    }
  }

  .message-btn {
    background-color: transparent !important;
    border: none;
  }

  .profile {
    .profile_dropdown {
      .pdt {
        outline: none;
      }
    }

  }
}
</style>


